import { Component, OnInit, ChangeDetectionStrategy, Injectable, ViewChild, ElementRef, AfterViewInit, ChangeDetectorRef } from '@angular/core';
import { Observable, fromEvent, of } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { debounceTime, distinctUntilChanged, map, pluck, switchMap } from 'rxjs/operators';

@Injectable()
class WikiService {
  readonly url = 'https://zh.wikipedia.org/w/api.php?action=opensearch&format=json&limit=5&origin=*&search=';
  list(keyword): Observable<string[]> {
    return ajax.getJSON(this.url + keyword).pipe(map(item => item[1]));
  }
}

@Component({
  selector: 'app-test-rx',
  template: `
    <div class="autocomplete">
      <input #input class="form-control" placeholder="search..." />
      <ul class="list-group mt-2">
        <li class="list-group-item" *ngFor="let item of list">{{ item }}</li>
      </ul>
    </div>
  `,
  styles: [
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [WikiService]
})
export class TestRxComponent implements OnInit, AfterViewInit {
  @ViewChild('input', { static: true }) private inputEl: ElementRef;
  list: string[] = [];
  constructor(private wikiServe: WikiService, private cdr: ChangeDetectorRef) {
  }

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    fromEvent(this.inputEl.nativeElement, 'input')
      .pipe(
        debounceTime(200),
        pluck('target', 'value'),
        distinctUntilChanged(),
        switchMap((value: string) => {
          return value.length ? this.wikiServe.list(value) : of([]);
        })
      )
      .subscribe(data => {
        console.log(66, data);
        this.list = data;
        this.cdr.markForCheck();
      })
  }

}
